<template>
    <layout title="个人信息" :showBack="false" selected="me" :showTabBar="true">
        <flexbox style="border:1px solid #dddddd; padding:5px;">
            <flexbox-item>
                <div style="text-align:center;">
                    <img v-if="user.avatar" class="photo" :src="user.avatar" alt="">
                    <div v-else class="photo" style="margin: auto;">
                        <x-icon type="android-person" size="75"></x-icon>
                    </div>
                </div>
            </flexbox-item>
            <flexbox-item>
                <div>
                    <p> <span class="lbl">姓名：</span> {{ user.name }}</p>
                    <p> <span class="lbl">职位：</span>{{ user.position }}</p>
                </div>
            </flexbox-item>
        </flexbox>
        <group title="">
            <cell :is-link="true" title="我的客户"></cell>
            <cell :is-link="true" title="我的行动"></cell>
            <cell :is-link="true" title="我的项目"></cell>
            <cell :is-link="true" title="我的售后"></cell>
        </group>
    </layout>
</template>

<script>
    import { Group, Datetime, XInput, FormPreview, XButton, Flexbox, FlexboxItem, Cell } from 'vux'
    import Layout from './Layout.vue'
    import { user as api } from '../api'
    import { cookie } from 'vux'

    export default {
        name: 'me',
        components: {
            Group,
            Datetime,
            XInput,
            FormPreview,
            XButton,
            Layout,
            Flexbox,
            FlexboxItem,
            Cell
        },
        data() {
            return {
                user: {}
            }
        },
        methods: {
        },
        async mounted() {
            this.$store.commit('selectedTab', 'me')
            //获取用户信息
            let result = await api.detail({
                userid: cookie.get('userid')
            })
            this.user = result.data
        }
    }

</script>
<style scoped>
    .photo {
        height: 80px;
        width: 80px;
        border-radius: 80px;
        border: 1px solid #dddddd;
    }

    .lbl {
        color: #9D9D9D;
    }

</style>
